<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>菜单管理</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
    <script language="javascript">
        $(function () {
            //导航切换
            $(".imglist li").click(function () {
                $(".imglist li.selected").removeClass("selected")
                $(this).addClass("selected");
            })
        })	
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".click").click(function () {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function () {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">权限管理</a></li>
            <li><a href="#">菜单管理</a></li>
        </ul>
    </div>

    <div class="rightinfo" id="box">

        <div class="tools">
            <ul class="toolbar">
                <li class="click" v-on:click="insertOneMenu"><span><img src="/images/t01.png" /></span>添加</li>
            </ul>
        </div>

        <table class="tablelist">
            <thead>
                <tr>
                    <th><input type="checkbox" /></th>
                    <th>菜单ID</th>
                    <th>菜单名称</th>
                    <th>perdesc</th>
                    <th>路径</th>
                    <th>菜单等级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in currentPageData">
                    <td><input name="" type="checkbox" value="" /></td>
                    <td>{{item.id}}</td>
                    <td>{{item.pername}}</td>
                    <td>{{item.perdesc}}</td>
                    <td>{{item.url}}</td>
                    <template v-if="item.parentId==null">
                        <td>一级权限</td>
                    </template>
                    <template v-else>
                        <td>二级权限</td>
                    </template>
                    <td>
                        <a href="#" class="tablelink" v-on:click="updateOneMenu(item.id)">修改</a>
                        &nbsp;
                        <a href="#" class="tablelink" v-on:click="deleteOneMenu(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>

        </table>

        <!-- 分页div -->
        <div class="pagin">
            <div class="message">
                共<i class="blue">{{info.total}}</i>条记录，当前显示第&nbsp;
                <i class="blue">{{info.pageNum}}&nbsp;</i>页
            </div>
            <ul class="paginList">
                <!-- 首页 -->
                <li class="paginItem" @click="getPage(1)"><a href="javascript:;">首页</a></li>

                <!-- 上一页 -->
                <template v-if="info.isFirstPage">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                </template>
                <template v-else>
                    <li class="paginItem" @click="getPage(prePage)">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                </template>

                <!-- 循环遍历页码 -->
                <li class="paginItem" v-for="index of pages" :key="index" @click="getPage(index)">
                    <a href="javascript:;">{{index}}</a>
                </li>

                <!-- 下一页 -->
                <template v-if="info.isLastPage">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </template>
                <template v-else>
                    <li class="paginItem" @click="getPage(nextPage)">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </template>

                <!-- 尾页 -->
                <li class="paginItem" @click="getPage(pages)"><a href="javascript:;">尾页</a></li>

            </ul>
        </div>

    </div>

    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
    </script>
</body>

<script>
    var obj = {
        data () {
            return {
                currentPageData: [], //当前页显示内容
                info: [], // 服务器返回数据的集合
                prePage: 0, // 上一页页码
                nextPage: 0, // 下一页页码
                pages: 0, // 总页数
            }
        },
        mounted () {
            axios({
                method: 'get',
                url: '/blog/admin/allMenu/1',
            }).then(function (result) {
                vm.currentPageData = result.data.data.list;
                vm.info = result.data.data;
                vm.prePage = result.data.data.prePage;
                vm.nextPage = result.data.data.nextPage;
                vm.pages = result.data.data.pages;
            });
        },
        methods: {
            getPage (pageNum) {
                axios({
                    method: 'get',
                    url: '/blog/admin/allMenu/' + pageNum,
                }).then(function (result) {
                    vm.currentPageData = result.data.data.list;
                    vm.info = result.data.data;
                    vm.prePage = result.data.data.prePage;
                    vm.nextPage = result.data.data.nextPage;
                    vm.pages = result.data.data.pages;
                });
            },
            insertOneMenu () {
                window.location.href = "/admin_menu_manage/add_menu.html";
            },
            deleteOneMenu (mid) {
                if (confirm("确定删除此菜单吗?")) {
                    axios({
                        method: 'delete',
                        url: '/blog/admin/menu/' + mid,
                    }).then(function (result) {
                        if (result.code == -1) {
                            window.alert(result.data.msg);
                        } else {
                            window.alert(result.data.msg);
                            setTimeout(function () {
                                window.location.reload();
                            }, 500);
                        }
                    });
                }
            },
            updateOneMenu (mid) {
                window.location.href = "/admin_menu_manage/update_menu.html?mid=" + mid;
            },
        }
    }
    var vm = Vue.createApp(obj).mount("#box")
</script>

</html>